<template>
  <v-bottom-navigation
    color="rgb(250,114,152)"
    fixed
    class="navi"
    v-model="bottomNav"
  >
    <v-btn
      height="100%"
      width="20%"
      min-width="1px"
      v-for="button in buttons"
      :key="button.value"
      :value="button.value"
    >
      <span>{{ button.desc }}</span>
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="button.icon" />
      </svg>
    </v-btn>
  </v-bottom-navigation>
</template>

<script>
export default {
  name: "Navi",
  data() {
    return {
      bottomNav: "index",
      buttons: [
        { value: "index", desc: "首页", icon: "#icon-home1" },
        { value: "channel", desc: "频道", icon: "#icon-pindao" },
        { value: "notification", desc: "动态", icon: "#icon-dongtai" },
        { value: "shop", desc: "会员购", icon: "#icon-huiyuangouxi" },
        { value: "myinfo", desc: "我的", icon: "#icon-zhuzhan" }
      ]
    };
  }
};
</script>
<style lang="stylus" scoped>
.navi
  bottom: 0px
.icon
  font-size 20px
</style>
